// id封装函数
function my$(id) {
    return document.getElementById(id);
}
// 动画封装函数
function animate(element,target) {
    // 先清除定时器
    clearInterval(element.timeId);
    // 设置定时器.只能产生一个定时器
    element.timeId = setInterval(function() {
        // 获取当前div的位置
        var current = element.offsetLeft;//数组类型;
        // 设置div每次移动的距离---像素
        var step = 100;
        // 判断要移动的是正数还是负数
        step = current < target ? step : -step;
        // 每次移动后的距离
        current += step;
        // 判断当前移动后的位置是否到达目标位置
        if(Math.abs(target - current) > Math.abs(step)) {
            
            element.style.left = current + "px";
        }else{
            // 清除定时器
            clearInterval(element.timeId);
            element.style.left = target + "px";
        }
    },10);
}

// 获取最外面的div
var box = my$("box");
// 获取相框的宽度
var imgWidth = my$("xiangkuang").offsetWidth;
// 获取ul里的li
var list = my$("ulobj").getElementsByTagName("li");
// 获取ol里的li
var liobj = my$("olobj").getElementsByTagName("li");
// 获取左右按钮div
var anniu = my$("anniu");

// 全局变量
var pic = 0;
// console.log(liobj);
// 遍历ul里面的li标签
for(var i=0;i<liobj.length;i++ ) {

    // 给ol里面的li自定义索引
    liobj[i].setAttribute("index",i);
    // 给ol里面的li注册点击事件
    liobj[i].onclick = function() {
  
        // 循环遍历ol里面的li标签
        for(var j =0;j<liobj.length;j++ ) {
            // 先干掉ol里面所有li的背景
            liobj[j].removeAttribute("class");
        }
        // 设置点击进来li的背景颜色
        this.className = "bjys";
        // 设置ol里面的li的索引值
        pic =this.getAttribute("index");
        //  动画移动ul里面的li
        animate(my$("ulobj"),-pic*imgWidth);
    };
}

// 鼠标进入div显示左右按钮
box.onmouseover = function() {
    anniu.style.display = "block";
    clearInterval(tt);
}
// 鼠标离开div隐藏左右按钮
box.onmouseout = function() {
    anniu.style.display = "none";
    tt = setInterval(dianjia,5000);
}

var tt = setInterval(dianjia,5000);
// 点击右标签
my$("right").onclick = dianjia;
 function dianjia() {
    // 判断无缝连接
    if(pic == liobj.length-1 ) {
        // 如果图片超过了5就返回0；
        pic = 0;
        // ul原来的位置
        my$("ulobj").style.left = 0 + "px";
    }else{
        // 没有超出就继续++
        pic++;
        animate(my$("ulobj"),-pic*imgWidth);
        // 判断下面的红标跟着按钮走
    }

    if(pic == list.length-1 ) {
        // 等于5把所有按钮颜色干掉
        for(var i=0;i<liobj.length-1;i++) {
            liobj[i].removeAttribute("class");
        }
        // 然后给第一个按钮上颜色
        liobj[0].className = "bjys";
    }else{
        // 点击的按钮不等于5判断点击的是哪一个按钮
        for(var i =0;i<liobj.length;i++) {
            liobj[i].removeAttribute("class");
        }
        liobj[pic].className = "bjys";
    }
};
// 点击左标签
my$("left").onclick = function() {
    // 判断pic等不等于0；
    if(pic == 0){
        pic = 5;
        my$("ulobj").style.left = -pic*imgWidth + "px";
    }
    // 不等于0
    pic--
    animate(my$("ulobj"),-pic*imgWidth);
    // 同步小按钮按时先干掉全部小按钮颜色
    for(var i=0;i<liobj.length;i++) {
        liobj[i].removeAttribute("class");
    }
    // 设置当前索引的颜色
    liobj[pic].className = "bjys";
};
